<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入轮播图名称" />
                </el-form-item>
                <el-form-item label="轮播图" prop="photo">
                    <ImgUpload v-model="form.photo" />
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio label="移动端" />
                        <el-radio label="电脑端" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        {{ props.BannerInfo ? '编辑轮播' : '提交' }}
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import ImgUpload from '../../../components/img-upload.vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { BannerPost, BannerUpdate } from '../../../api/banner'
import { BannerType } from '../../../types/banner';
import { cloneDeep } from 'lodash';
interface EmitType {
    (agr: 'update:modelValue', bool: boolean): void
    (agr: 'bannerAdd'): void
}
const emit = defineEmits<EmitType>()
interface PropsType {
    BannerInfo: BannerType | undefined
}
const props = defineProps<PropsType>()
let form = reactive<BannerType>({
    name: '',
    photo: '',
    type: '',
})
if (props.BannerInfo) {
    form = props.BannerInfo
}

const rules = reactive<FormRules<{ name: string, type: string, photo: string }>>({
    name: [
        { required: true, message: '请输入轮播图名称', trigger: 'blur' },
    ],

    type: [
        {
            required: true,
            message: '请选择轮播图类型',
            trigger: 'change',
        },
    ],
    photo: [
        {
            required: true,
            message: '请上传轮播图',
            trigger: 'change',
        },
    ]


})

const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log(form);
            if (!props.BannerInfo) {
                BannerPost(form).then(() => {
                    emit('bannerAdd')
                    ElMessage.success('新增成功')
                    emit('update:modelValue', false)
                })
            } else {
                let obj = cloneDeep(form)
                delete obj.createdAt
                delete obj.updatedAt
                BannerUpdate(props.BannerInfo.objectId!, obj).then(() => {
                    ElMessage.success('编辑成功')
                    emit('update:modelValue', false)
                })
            }

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped></style>